<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>付款</title>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/cart.css"/>
</head>
<body>

<!--start-->
<div class="techbook pay">
    <!--head-->
    <div class="head head_cart">
        <div class="top">
            <div class="wrap">
                <div class="fl">51TechBook.com，为技术而生！</div>
                <div class="fr">
                    <p class="fl">Hi，<a href="" class="username">张三</a><a href="" class="logout">[退出]</a></p>

                    <div class="fr topMenu">
                        <dl>
                            <dt>
                                <a href="">我的订单</a>
                            </dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">个人中心</a>
                            </dt>
                            <dd>
                                <a href="">个人信息</a><a href="">安全中心</a><a href="">收货地址</a><a href="">等待添加</a>
                            </dd>
                        </dl>
                        <dl class="cart">
                            <dt><a href="">购物车<i>16</i></a></dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">我是商家</a>
                            </dt>
                            <dd>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">客户服务</a>
                            </dt>
                            <dd>
                                <a href="">消费服务</a>
                                <a href="">商家服务</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">更多</a>
                            </dt>
                            <dd>
                                <a href="">更多</a>
                                <a href="">更多</a>
                                <a href="">更多</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bot">
            <div class="wrap">
                <div class="left fl">
                    <a href="" class="logo"><img src="img/front/about_logo.jpg" alt=""></a>
                </div>
                <div class="cart_step step_2 fr">
                    <span>购物车</span><span>确认订单</span><span>支付完成</span>
                </div>
            </div>
        </div>

    </div>
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">
            <div class="payResultBox bgWhite" id="payResultBox">
                <div class="info">
                    <div class="fl">
                        <h3><em class="succ">订单提交成功</em>，请你忙付款！&emsp;订单号：845702110061</h3>
                        <p>请您在提交订单后<em>24小时内</em>完成支付，否则订单会自动取消。</p>
                    </div>
                    <div class="fr">
                        <div>应付金额：<b>￥138.0</b>元</div>
                        <span class="toggle">收起详情</span>
                    </div>
                </div>
                <div class="goods">
                    <dl>
                        <dt>收货地址：</dt>
                        <dd>湖北省武汉湖北省武汉湖北省武汉湖北省武汉&emsp;收货人：王小二&emsp;&emsp;157******123</dd>
                    </dl>
                    <dl>
                        <dt>商品名称：</dt>
                        <dd>
                            <p>商品名称商品名称商品名称</p>
                        </dd>
                    </dl>
                </div>
            </div>

            <h3 class="typeTitle">请选择以下方式付款</h3>

            <div class="addressTab tab">
                <div class="tabs">
                    <ul class="list">
                        <li class="tab tabCurr">支付平台</li>
                        <li class="tab">储蓄卡</li>
                        <li class="tab">信用卡</li>
                    </ul>
                </div>
                <div class="tabCons bgWhite payListCons">
                    <div class="tabCon tabConCurr">

                        <ul class="payList">
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_zfb.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_wx.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_hb.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_kq.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_dx.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_yl.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_gw.gif" alt=""/>
                                </label>
                            </li>
                            <li>
                                <label><input type="radio" name="type"/><img src="img/bg/pay_type_zfb.gif" alt=""/>
                                </label>
                            </li>
                        </ul>

                        <div class="cb"></div>

                        <div class="next">
                            <button>下一步</button>
                        </div>


                    </div>
                    <div class="tabCon">2</div>
                    <div class="tabCon">3</div>
                </div>
            </div>

        </div>
    </div>
    <!--body End-->

    <!--foot-->
    <div class="foot">
        <div class="copyright">
            <p class="wrap">Copyright&nbsp;&copy;&nbsp;2013-2018&nbsp;武汉创远达信息技术有限公司版权所有&emsp;鄂ICP备14008188-1号</p>
        </div>
    </div>
    <!--foot End-->

    <!--pop-->
    <dl class="payResultPop" id="payResultPop">
        <dt>
            <span class="close"></span>
            <b>正在支付...</b>
        </dt>
        <dd>
            <p>支付成功了！</p>
            <a href="">立即查看订单详情></a>
            <div class="line"></div>
            <p>如果支付失败！</p>
            <a href="">查看常见支付问题></a>
        </dd>
    </dl>
    <!--pop End-->

</div>
<!--End-->

</body>
<script src="script/jquery.js"></script>
<script src="script/plug.js"></script>
<script src="script/common.js"></script>
<script>
$(function(){
    //Tab
    $('.tab').tab();

    //收起详情
    ;(function () {
        var $box=$('#payResultBox'),$goods=$box.find('.goods');
        $box.on('click','.toggle', function () {
            $(this).toggleClass('close');
            $goods.toggle();
        });
    })();

    //支付结果弹窗
    $('#payResultPop').popup();
});
</script>
</html>